<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO Meta Tags (English & Chinese) -->
    <title>ComfyUI Workflow Fixer - AI Workflow Migration Tool | AI工作流修复工具</title>
    <meta name="description" content="Free online tool for fixing and converting ComfyUI workflows. Supports AI workflow migration and compatibility fixes. | 免费在线AI工作流修复和转换工具，支持ComfyUI工作流迁移和兼容性修复。">
    <meta name="keywords" content="ComfyUI, workflow, AI workflow, PaintingCoder, workflow fixer, AI tools, workflow migration, workflow converter, AI image generation, stable diffusion workflow, 人工智能工作流, 工作流修复, AI绘画工作流, 稳定扩散工作流, 工作流转换器, AI工具, 工作流迁移, ComfyUI工作流, AI模型工具, 智能绘画工作流">
    
    <!-- Open Graph / Social Media Meta Tags -->
    <meta property="og:title" content="ComfyUI Workflow Fixer - AI Workflow Migration Tool | AI工作流修复工具">
    <meta property="og:description" content="Free online tool for fixing and converting ComfyUI workflows. Perfect for AI workflow migration and compatibility fixes. | 免费在线AI工作流修复和转换工具，完美支持工作流迁移和兼容性修复。">
    <meta property="og:type" content="website">
    <meta property="og:image" content="../images/workflow_fix_top_banner01.jpg">
    
    <!-- Additional Meta Tags -->
    <meta name="author" content="PaintingCoder">
    <meta name="robots" content="index, follow">
    <meta name="language" content="English, Chinese">
    <meta name="revisit-after" content="7 days">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://github.com/jammyfu/ComfyUI_PaintingCoderUtils">
    <link rel="stylesheet" href="css/styles.css">
    
    <style>
        /* 添加主题变量 */
        :root {
            /* Light theme */
            --bg-color: #ffffff;
            --text-color: #333333;
            --border-color: #dddddd;
            --container-bg: #f5f5f5;
            --error-color: #ff4444;
            --success-color: #44bb44;
            --hover-bg: #e8e8e8;
            --button-bg: #4a90e2;
            --button-text: #ffffff;
            --button-hover: #357abd;
            --dropzone-border: #cccccc;
            --dropzone-bg: #ffffff;
            --file-item-bg: #ffffff;
        }

        /* Dark theme */
        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --text-color: #ffffff;
            --border-color: #444444;
            --container-bg: #2d2d2d;
            --error-color: #ff6666;
            --success-color: #66cc66;
            --hover-bg: #3d3d3d;
            --button-bg: #4a90e2;
            --button-text: #ffffff;
            --button-hover: #357abd;
            --dropzone-border: #444444;
            --dropzone-bg: #2d2d2d;
            --file-item-bg: #363636;
        }

        /* 更新现有样式使用变量 */
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
 
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 头图容器 -->
        <div class="header-image">
            <a href="https://github.com/jammyfu/ComfyUI_PaintingCoderUtils" target="_blank" title="Visit PaintingCoder on GitHub">
                <img src="../images/workflow_fix_top_banner01.jpg" alt="Painting Coder Logo">
            </a>
            <span class="version-tag">Version 0.2.3</span>
            <div class="header-controls">
                <button class="header-btn theme-btn" onclick="toggleTheme()" title="Toggle theme">
                    <!-- 月亮图标 -->
                    <svg class="theme-icon moon-icon" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                    </svg>
                    <!-- 太阳图标 -->
                    <svg class="theme-icon sun-icon" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                    </svg>
                </button>
                <button class="header-btn lang-btn" onclick="toggleLanguage()" id="langBtn">中文</button>
            </div>
        </div>
        
        <!-- 主内容容器 -->
        <div class="container">
            <h1 id="title">ComfyUI Workflow Fixer</h1>
            <p id="description">This tool helps fix old workflow JSON files by adding the PaintingCoder namespace to node types.</p>
            
            <!-- 添加功能选择下拉菜单 -->
            <div class="fix-type-select">
                <select id="fixType" onchange="updateUI()">
                    <option value="namespace">Fix PaintingCoder old version (<0.3.0) workflow</option>
                    <option value="path">Fix Path Separator</option>
                </select>
            </div>
            
            <!-- 添加路径转换选项 -->
            <div id="pathOptions" class="path-options">
                <div class="path-option">
                    <label>
                        <input type="radio" name="pathType" value="auto" checked>
                        <span id="autoLabel">Auto Detect</span>
                    </label>
                    <label>
                        <input type="radio" name="pathType" value="toWindows">
                        <span id="toWindowsLabel">To Windows Format (\)</span>
                    </label>
                    <label>
                        <input type="radio" name="pathType" value="toUnix">
                        <span id="toUnixLabel">To Unix Format (Linux/Mac) (/)</span>
                    </label>
                </div>
            </div>
            
            <div class="file-input">
                <div id="dropZone" class="file-drop-zone">
                    <div id="dragText">Choose Workflow File or drag and drop file here</div>
                    <input type="file" id="fileInput" accept=".json" multiple onchange="handleFileSelect(event)">
                </div>
            </div>
            
            <div class="button-container">
                <button id="fixButton" onclick="fixAndDownload()" disabled>Fix & Download</button>
                <button id="clearButton" onclick="clearFiles()" class="clear-btn" disabled>Clear All</button>
                <div class="zip-option">
                    <input type="checkbox" id="zipDownload" class="zip-checkbox">
                    <label for="zipDownload" class="zip-label" id="zipLabel">Download as ZIP</label>
                </div>
            </div>
            
            <div id="selectedFiles" class="selected-files"></div>
            
            <div id="error" class="error"></div>
            <div id="success" class="success"></div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer style="text-align: center; padding: 20px; margin-top: 30px; border-top: 1px solid var(--border-color);">
        <p style="margin-bottom: 5px;">© 2025 jammyfu. All rights reserved.</p>
    </footer>

    <!-- 引入外部JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 